<script setup lang="ts">
defineOptions({
  name: 'Single',
});

const list = reactive([{
  name: '项目总数',
  num: 0,
  icon: 'project1',
  scort: '项',
}, {
  name: '项目总金额',
  num: 0,
  icon: 'project2',
  scort: '元',
}, {
  name: '项目盈利数',
  num: 0,
  icon: 'project3',
  scort: '项',
}, {
  name: '项目亏损数',
  num: 0,
  icon: 'project4',
  scort: '项',
}]);
</script>

<template>
  <PubPageMain>
    <div class="pjTitle">
      项目概况
    </div>
    <div class="pjContent">
      <div v-for="(item, indx) in list" :key="indx" class="pjItem">
        <div class="pjItem-left">
          <div class="pjItem-name">
            {{ item.name }}
          </div>
          <div class="pjItem-num">
            <span class="big">{{ item.num }}</span>{{ item.scort }}
          </div>
        </div>
        <div class="pjItem-right">
          <PubSvgIcon size="70px" :name="item.icon" />
        </div>
      </div>
    </div>
  </PubPageMain>
</template>

<style lang="scss" scoped>
.pjTitle {
  padding-left: 15px;
  background: url("@/assets/images/title-left-bg.svg") no-repeat;
}
.pjContent {
  display: flex;
}
.pjItem {
  display: flex;
  width: 25%;
  height: 128px;
  margin: 0 6px;
  margin: 10px 0 10px 0;
  background-image: linear-gradient(65deg, #fafcff 0%, #f4f7ff 100%);
  .pjItem-left {
    flex: 2;
  }
  .pjItem-right {
    flex: 1;
    padding: 14px 0 0 10px;
  }
  .pjItem-name {
    padding: 26px 0 0 20px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    font-weight: 500;
    color: #151e26;
    text-align: center;
  }
  .pjItem-num {
    padding: 8px 0 0 20px;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    font-weight: 400;
    color: #8a8e92;
    text-align: center;
    .big {
      padding-right: 6px;
      font-family: DINEngschrift-Alternate;
      font-size: 32px;
      font-weight: Alternate;
      color: #151e26;
    }
  }
}
</style>
